Component({
  properties: {
    // 列数，默认2列
    columns: {
      type: Number,
      value: 2
    },
    // 列间距
    gap: {
      type: Number,
      value: 20 // rpx
    },
    // 容器左右边距
    padding: {
      type: Number,
      value: 24 // rpx
    },
    // 活动数据列表
    activityList: {
      type: Array,
      value: []
    }
  },

  data: {
    // 每列的高度记录
    columnHeights: [],
    // 每列的卡片数据
    columnItems: [],
    // 容器宽度
    containerWidth: 0,
    // 单个卡片宽度
    itemWidth: 0
  },

  lifetimes: {
    attached() {
      this.initWaterfall();
    }
  },

  observers: {
    'activityList': function(newList) {
      if (newList && newList.length > 0) {
        this.layoutWaterfall();
      }
    }
  },

  methods: {
    // 初始化瀑布流
    initWaterfall() {
      // 延迟执行，确保组件完全渲染
      setTimeout(() => {
        const query = this.createSelectorQuery();
        query.select('.waterfall-container').boundingClientRect((rect) => {
          if (rect) {
            const containerWidth = rect.width;
            const columns = this.properties.columns;
            const gap = this.properties.gap;
            const padding = this.properties.padding;
            
            // 计算单个卡片宽度 (转换rpx到px)
            const gapPx = gap * wx.getSystemInfoSync().windowWidth / 750;
            const paddingPx = padding * wx.getSystemInfoSync().windowWidth / 750;
            const itemWidth = (containerWidth - paddingPx * 2 - gapPx * (columns - 1)) / columns;
            
            // 初始化列高度数组
            const columnHeights = new Array(columns).fill(0);
            const columnItems = new Array(columns).fill(null).map(() => []);
            
            this.setData({
              containerWidth,
              itemWidth,
              columnHeights,
              columnItems
            });
            
            // 如果已有数据，立即布局
            if (this.properties.activityList.length > 0) {
              this.layoutWaterfall();
            }
          }
        }).exec();
      }, 100);
    },

    // 瀑布流布局算法
    layoutWaterfall() {
      const { activityList, columns, gap } = this.properties;
      const { itemWidth } = this.data;
      
      if (!itemWidth || !activityList.length) return;
      
      // 重置列数据
      const columnHeights = new Array(columns).fill(0);
      const columnItems = new Array(columns).fill(null).map(() => []);
      
      // 为每个活动项分配到最短的列
      activityList.forEach((item, index) => {
        // 找到当前最短的列
        const shortestColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
        
        // 估算卡片高度（基于图片比例 + 信息区域高度）
        const estimatedHeight = this.estimateCardHeight(item, itemWidth);
        
        // 添加到对应列
        const cardData = {
          ...item,
          index,
          width: itemWidth,
          left: shortestColumnIndex * (itemWidth + gap),
          top: columnHeights[shortestColumnIndex]
        };
        
        columnItems[shortestColumnIndex].push(cardData);
        columnHeights[shortestColumnIndex] += estimatedHeight + gap;
      });
      
      this.setData({
        columnHeights,
        columnItems
      });
    },

    // 估算卡片高度
    estimateCardHeight(item, width) {
      // 基础信息区域高度（rpx转px）
      const systemInfo = wx.getSystemInfoSync();
      const infoHeightRpx = 120; // 120rpx的信息区域
      const infoHeight = infoHeightRpx * systemInfo.windowWidth / 750;
      
      // 根据图片比例估算图片高度
      let imageHeight = width * 0.8; // 默认5:4比例，适合小红书风格
      
      // 如果有图片尺寸信息，使用实际比例
      if (item.imageWidth && item.imageHeight) {
        imageHeight = (width * item.imageHeight) / item.imageWidth;
      }
      
      // 限制最小和最大高度
      imageHeight = Math.max(width * 0.6, Math.min(imageHeight, width * 1.5));
      
      return imageHeight + infoHeight;
    },

    // 图片加载完成后重新计算高度
    onImageLoad(e) {
      const { index } = e.currentTarget.dataset;
      const { width, height } = e.detail;
      
      // 重新计算实际高度并更新布局
      this.updateCardHeight(index, width, height);
    },

    // 更新卡片实际高度
    updateCardHeight(cardIndex, imageWidth, imageHeight) {
      const { itemWidth } = this.data;
      const actualImageHeight = (itemWidth * imageHeight) / imageWidth;
      const infoHeight = 120; // 信息区域高度
      const actualCardHeight = actualImageHeight + infoHeight;
      
      // 这里可以进一步优化，重新调整布局
      // 为了性能考虑，暂时使用估算高度
    },

    // 卡片点击事件
    onCardTap(e) {
      const { item } = e.currentTarget.dataset;
      this.triggerEvent('cardtap', { item });
    },

    // 刷新瀑布流布局
    refresh() {
      this.layoutWaterfall();
    },

    // 添加新数据
    appendData(newData) {
      const currentList = this.properties.activityList;
      const updatedList = [...currentList, ...newData];
      
      // 触发父组件更新数据
      this.triggerEvent('datachange', { list: updatedList });
    }
  }
})